/**
 * 基础echart组件
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import echarts from 'echarts';
import shouldComponentUpdate from '../decorator/shouldComponentUpdate';

@shouldComponentUpdate
class Echart extends Component {
	state = {}

	componentDidMount() {
		this.init();
	}

	componentDidUpdate(prevProps, prevState) {
		this.myChart.setOption(this.props.option);
		this.chartResize();
	}

	init() {
		this.myChart = echarts.init(this.chartDom, 'shine');
		this.myChart.setOption(this.props.option);
		window.addEventListener('resize', this.chartResize);
	}

	chartResize = () => {
		this.myChart.resize();
	}

	refReady = d => {
		if (d) {
			this.setState({
				width: d.offsetWidth,
				height: d.offsetHeight
			});
			this.chartDom = d;
		}
	}

	render() {
		const { width } = this.state;
		const { option, style, ...props } = this.props;
		const sty = { ...style, width: `${width}px` };
		return (
			<div ref={this.refReady} {...props} style={sty} />
		);
	}
}

Echart.propTypes = {

};

export default Echart;

export const colorPalette = ['#4FC3F7', '#FFEB3B', '#FF9800', '#009688', '#795548', '#9C27B0'];

const theme = {

  color: colorPalette,

  title: {
    textStyle: {
      fontWeight: 'normal',
    },
  },

  toolbox: {
    iconStyle: {
      normal: {
        borderColor: '#06467c',
      },
    },
  },

  tooltip: {
    backgroundColor: 'rgba(0,0,0,0.6)',
    textStyle: {
      fontSize: 12,
    },
  },

  dataZoom: {
    dataBackgroundColor: '#dedede',
    fillerColor: 'rgba(154,217,247,0.2)',
    handleColor: '#005eaa',
  },

  timeline: {
    lineStyle: {
      color: '#005eaa',
    },
    controlStyle: {
      normal: {
        color: '#005eaa',
        borderColor: '#005eaa',
      },
    },
  },

  candlestick: {
    itemStyle: {
      normal: {
        color: '#c12e34',
        color0: '#2b821d',
        lineStyle: {
          width: 1,
          color: '#c12e34',
          color0: '#2b821d',
        },
      },
    },
  },

  graph: {
    color: colorPalette,
  },

  map: {
    label: {
      normal: {
        textStyle: {
          color: 'rgba(0, 0, 0, 0)',
        },
      },
      emphasis: {
        textStyle: {
          color: '#c12e34',
        },
      },
    },
    itemStyle: {
      normal: {
        borderColor: '#eee',
        areaColor: '#ddd',
      },
      emphasis: {
        areaColor: '#16afcb',
      },
    },
  },

  gauge: {
    axisLine: {
      show: true,
      lineStyle: {
        color: [[0.2, '#2b821d'], [0.8, '#005eaa'], [1, '#c12e34']],
        width: 5,
      },
    },
    axisTick: {
      splitNumber: 10,
      length: 8,
      lineStyle: {
        color: 'auto',
      },
    },
    axisLabel: {
      textStyle: {
        color: 'auto',
      },
    },
    splitLine: {
      length: 12,
      lineStyle: {
        color: 'auto',
      },
    },
    pointer: {
      length: '90%',
      width: 3,
      color: 'auto',
    },
    title: {
      textStyle: {
        color: '#333',
      },
    },
    detail: {
      textStyle: {
        color: 'auto',
      },
    },
  },
};

echarts.registerTheme('shine', theme);
